<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刘昊然的空间网页</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}



			.first {
				display: block;
				width: 1900px;
				height: 130px;
				background: #000000;
			}

			.first img {
				height: 110px;
				width: 220px;
				float: left;
				margin-left: 100px;
				margin-top: 10px;
			}

			.first img:link {}



			.first ul {
				width: 480px;
				height: 130px;
				list-style: none;
				margin-right: 150px;
				float: right;
			}

			.first ul li {
				float: left;
				width: 80px;
				line-height: 130px;
			}

			.first ul li a:visited {
				color: white;
			}

			.first ul li a:link {

				text-decoration: blink;
				font: 18px "Microsoft YaHei";
				color: white;
			}

			.first ul li a:hover {
				font: 20px "Microsoft YaHei";
				color: chocolate;
			}

			.fifth {
				width: 1900px;
				display: block;
				height: 500px;
				background: #000000;
			}

			.fifth_1 {
				display: block;
				height: 250px;
			}

			.fifth_1_1 {
				float: left;
				margin-left: 100px;
				margin-top: 100px;
				width: 400px;
			}

			.fifth_1_2 {
				float: left;
				margin-top: 100px;
				width: 400px;
			}

			h3 {
				font: 24px "楷体";
				color: white;
				padding-bottom: 10px;
				margin-bottom: 0px;
			}

			.fifth_1_1 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_1 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_1 ul li span:hover {
				color: aqua;
			}


			.fifth_1_1 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_2 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_2 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul li span:hover {
				color: aqua;
			}


			.fifth_1_3 {
				margin-top: 100px;
				float: left;
				width: 320px;
				box-sizing: border-box;
			}


			.fifth_1_4 {
				margin-top: 100px;
				float: left;
				width: 400px;
				margin-left: 120px;
				box-sizing: border-box;
			}

			.fifth_1_4 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_4 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}



			.fifth_1_4 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}


			.fifth_1_3 .font_1 {
				margin-top: 10px;
				float: left;
				border-radius: 20px;
				width: 80px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_1:hover {
				background: aqua;
			}

			.fifth_1_3 .font_2 {
				margin-top: 10px;
				margin-left: 10px;
				float: left;
				border-radius: 20px;
				width: 100px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_2:hover {
				background: aqua;
			}


			.bb1 {
				width: 250px;
				height: 28px;
				margin-top: 20px;
			}

			.search {
				width: 222px;
				height: 28px;
				border: 1px solid #e5e5e5;
				background: #f1f1f1;
				outline: none;
				padding-left: 20px;
				position: absolute;
			}

			.btn {
				width: 28px;
				height: 27px;
				margin-left: 200px;
				margin-top: 1px;
				background-repeat: no-repeat;
				/* 大小 */
				background-size: 28px 28px;
				/* 位置 */
				background-position: center;
				background-image: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/search.png);
				border: none;
				position: absolute;
				cursor: pointer;
			}

			.fifth_2 {
				margin: 0 auto;
				margin-top: 100px;
				height: 8px;
				width: 1500px;
				background: #555555;
			}

			.fifth_3 {
				margin-top: 50px;
				color: white;
				font: 20px "microsoft yahei";
				float: right;
				margin-right: 50px;
			}

			.container {
				width: 1900px;
				height: 665px;
				margin: 0;
				padding: 0;
				background-color: #000000;
			}
		</style>


	</head>
	<body>
		<div class="first">
			<a href="首页.html"><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/1.01.png" ></a>
			<ul>
				<li><a href="首页.html">主页</a></li>
				<li><a href="我的.html">me</a></li>
				<li><a href="动态.html">动态</a></li>
				<li><a href="图片馆.html">图像馆</a></li>
				<li><a href="博客.html">博客</a></li>
				<li><a href="联系我们.html">联系我们</a></li>
			</ul>
		</div>
		<div id="jsi-fountain-container" class="container"></div>

		<div style="text-align:center;clear:both;">
			<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
			<script src="/follow.js" type="text/javascript"></script>
		</div>

	<div class="fifth">
		<div class="fifth_1">
			<div class="fifth_1_1">
				<h3>近期活动</h3>
				<ul>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.刘昊然的近期行程</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.刘昊然去微博之夜</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.刘昊然的电视剧发布会</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.刘昊然去电影颁奖典礼</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.刘昊然20岁生日宴会</span></li></a>
				</ul>
			</div>
			<div class="fifth_1_2">
				<h3>近期评论</h3>
				<ul>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.20岁的好多天，依旧不如你聪明</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.生日快乐，祝你每天能吃到不一样的果冻。</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.怎么样的你我们都满意。生日快乐昊然！</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.宝贝生日快乐！要永远开心快乐！</span></li></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.你忙归忙什么时候有空嫁给我</span></li></a>
	
				</ul>
			</div>
			<div class="fifth_1_3">
				<h3>标签</h3>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_1">小清新</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">呆萌</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">演员</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">艺人</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">长腿欧巴</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">文艺青年</div></a>
				<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">暖心学长</div></a>
			</div>
			<div class="fifth_1_4">
				<h3>关于</h3>
				<ul>
					<li><span>想要知道更多</span></li>
				</ul>
				<div class="bb1">
					<input type="text" class="search" placeholder="SEARCH...">
					<a href="https://www.baidu.com/s?wd=%E5%88%98%E6%98%8A%E7%84%B6&rsv_spt=1&rsv_iqid=0xefa9f6080001e09b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101" target="_blank"><input type="text" class="btn"></a>
				</div>
			</div>
		</div>
		<div class="fifth_2">
		</div>
		<div class="fifth_3">
				Copyright © 2019 - 2021 南工院 移动1813 顾兆远版权所有
			</div>
		</div>
	</body>
</html>



<script>
	var RENDERER = {
		GRAVITY: 0.05,
		BASE_RATE: 0.6,
		OFFSET_RATE: 1 / 50,
		PARTICLE_COUNT: 30,

		init: function() {
			this.setParameters();
			this.setup();
			this.reconstructMethods();
			this.bindEvent();
			this.render();
		},
		setParameters: function() {
			this.$window = $(window);
			this.$container = $('#jsi-fountain-container');
			this.$canvas = $('<canvas />');
			this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d');
			this.particles = [];
			this.fountains = [];
			this.resizeIds = [];
		},
		setup: function() {
			this.particles.length = 0;
			this.fountains.length = 0;
			this.resizeIds.length = 0;
			this.width = this.$container.width();
			this.height = this.$container.height();
			this.$canvas.attr({
				width: this.width,
				height: this.height
			});
			this.velocity = 1;

			while (true) {
				var distance = 0,
					velocity = this.velocity;

				while (velocity >= 0) {
					velocity -= this.GRAVITY;
					distance += velocity;
				}
				if (distance > Math.min(this.height * (this.BASE_RATE - this.OFFSET_RATE), 500)) {
					this.velocity--;
					break;
				}
				this.velocity++;
			}
			this.gradient = this.context.createLinearGradient(0, this.height * this.BASE_RATE, 0, this.height);
			this.gradient.addColorStop(0, 'hsla(210, 80%, 5%, 0.5)');
			this.gradient.addColorStop(0.1, 'hsla(210, 80%, 5%, 0.8)');
			this.gradient.addColorStop(1, 'hsla(210, 80%, 5%, 1)');
			this.createElements();
		},
		createElements: function() {
			for (var i = 0, count = this.PARTICLE_COUNT * this.width / 500 * this.height / 500; i < count; i++) {
				this.particles.push(new PARTICLE(this));
			}
			for (var i = -2; i <= 2; i++) {
				this.fountains.push(new FOUNTAIN(this, this.width / 2 + i * Math.max(250, this.width / 5), this.height * (this.BASE_RATE -
					this.OFFSET_RATE), i));
			}
		},
		watchWindowSize: function() {
			while (this.resizeIds.length > 0) {
				clearTimeout(this.resizeIds.pop());
			}
			this.tmpWidth = this.$window.width();
			this.tmpHeight = this.$window.height();
			this.resizeIds.push(setTimeout(this.jdugeToStopResize, this.RESIZE_INTERVAL));
		},
		jdugeToStopResize: function() {
			var width = this.$window.width(),
				height = this.$window.height(),
				stopped = (width == this.tmpWidth && height == this.tmpHeight);

			this.tmpWidth = width;
			this.tmpHeight = height;

			if (stopped) {
				this.setup();
			}
		},
		reconstructMethods: function() {
			this.watchWindowSize = this.watchWindowSize.bind(this);
			this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
			this.render = this.render.bind(this);
		},
		bindEvent: function() {
			this.$window.on('resize', this.watchWindowSize);
		},
		getRandomValue: function(min, max) {
			return min + (max - min) * Math.random();
		},
		render: function() {
			requestAnimationFrame(this.render);
			this.context.fillStyle = 'hsla(0, 0%, 0%, 0.3)';
			this.context.fillRect(0, 0, this.width, this.height);
			this.context.save();
			this.context.globalCompositeOperation = 'lighter';

			for (var i = 0, count = this.particles.length; i < count; i++) {
				this.particles[i].render(this.context);
			}
			for (var i = 0, count = this.fountains.length; i < count; i++) {
				this.fountains[i].render(this.context);
			}
			this.context.restore();
			this.context.save();
			this.context.translate(0, this.height * this.BASE_RATE);
			this.context.scale(1, -(1 - this.BASE_RATE) / this.BASE_RATE);
			this.context.drawImage(this.$canvas.get(0), 0, 0, this.width, this.height * this.BASE_RATE, 0, -this.height *
				this.BASE_RATE, this.width, this.height * this.BASE_RATE);
			this.context.restore();
			this.context.fillStyle = this.gradient;
			this.context.fillRect(0, this.height * this.BASE_RATE, this.width, this.height * (1 - this.BASE_RATE));
		}
	};
	var PARTICLE = function(renderer) {
		this.renderer = renderer;
		this.init();
	};
	PARTICLE.prototype = {
		THRESHOLD: 10,

		init: function() {
			this.x = this.renderer.getRandomValue(-this.THRESHOLD, this.renderer.width + this.THRESHOLD);
			this.y = this.renderer.getRandomValue(-this.THRESHOLD, this.renderer.height * this.renderer.BASE_RATE + this.THRESHOLD);
			this.vx = this.renderer.getRandomValue(-0.3, 0.3);
			this.vy = this.renderer.getRandomValue(-0.3, 0.3);
			this.theta = this.renderer.getRandomValue(0, Math.PI * 2);
			this.deltaTheta = this.renderer.getRandomValue(Math.PI / 300, Math.PI / 100);
		},
		getColor: function() {
			var baseIndex = -1,
				fountains = this.renderer.fountains,
				hue = 0;

			for (var i = 0, count = fountains.length; i < count; i++) {
				if (this.x < fountains[i].x) {
					break;
				}
				baseIndex = i;
			}
			if (baseIndex == -1) {
				hue = fountains[0].hue;
			} else if (baseIndex == fountains.length - 1) {
				hue = fountains[fountains.length - 1].hue;
			} else {
				var dx1 = this.x - fountains[baseIndex].x,
					dx2 = fountains[baseIndex + 1].x - this.x;
				hue = fountains[baseIndex].hue * (dx2 / (dx1 + dx2)) + fountains[baseIndex + 1].hue * (dx1 / (dx1 + dx2));
			}
			return 'hsl(' + hue + ', 60%, ' + (15 * (1 + Math.sin(this.theta))) + '%)';
		},
		render: function(context) {
			context.save();
			context.fillStyle = this.getColor();
			context.beginPath();
			context.arc(this.x, this.y, 1, 0, Math.PI * 2, false);
			context.fill();
			context.restore();

			this.x += this.vx;
			this.y += this.vy;
			this.theta += this.deltaTheta;
			this.theta %= Math.PI * 2;

			if (this.x < -this.THRESHOLD && this.vx < 0 || this.x > this.renderer.width + this.THRESHOLD && this.vx > 0) {
				this.vx *= -1;
			}
			if (this.y < -this.THRESHOLD && this.vy < 0 || this.y > this.renderer.height * this.renderer.BASE_RATE + this.THRESHOLD &&
				this.vy > 0) {
				this.vy *= -1;
			}
		}
	};
	var FOUNTAIN = function(renderer, x, y, index) {
		this.renderer = renderer;
		this.x = x;
		this.y = y;
		this.index = index;
		this.init();
	};
	FOUNTAIN.prototype = {
		init: function() {
			this.waterLines = [];
			this.hue = 60;
			this.destinationHue = this.hue + 72 * this.index;
			this.waitCount = Math.abs(this.index) * 100;
			this.count = 0;
			this.theta = 0;
			this.status = 0;
		},
		controlStatus: function() {
			switch (this.status) {
				case 0:
					if (++this.count >= this.waitCount) {
						this.status = 1;
					}
					break;
				case 1:
					if (++this.count >= 300) {
						this.status = 2;
						this.count = 0;
					}
					break;
				case 2:
					this.hue += this.index;

					if (this.hue == this.destinationHue) {
						this.status = 3;
					}
					break;
				case 3:
					if (++this.count == 300) {
						this.status = 4;
						this.count = 0;
					}
					break;
				case 4:
					this.theta += Math.PI / 50;
					this.theta %= Math.PI * 2;

					if (this.count++ == 25) {
						this.status = 3;
					}
			}
			return this.status > 0;
		},
		render: function(context) {
			var hue = this.hue + Math.sin(this.theta) * 36;
			context.save();
			context.fillStyle = 'hsl(' + hue + ', 70%, 30%)';
			context.translate(this.x, this.y);
			context.scale(1, 0.3);
			context.beginPath();
			context.arc(0, 0, 10, 0, Math.PI * 2, false);
			context.fill();
			context.restore();

			if (!this.controlStatus()) {
				return;
			}
			context.save();
			context.translate(this.x, this.y);

			for (var i = this.waterLines.length - 1; i >= 0; i--) {
				if (!this.waterLines[i].render(context, hue)) {
					this.waterLines.splice(i, 1);
				}
			}
			context.restore();
			this.waterLines.push(new WATER_LINE(this.renderer));
		}
	};
	var WATER_LINE = function(renderer) {
		this.renderer = renderer;
		this.init();
	};
	WATER_LINE.prototype = {
		MAX_TRACES: 80,

		init: function() {
			var theta = this.renderer.getRandomValue(-Math.PI / 20, Math.PI / 20),
				rate = this.renderer.getRandomValue(0.8, 1);
			this.x = this.renderer.getRandomValue(-2, 2);
			this.y = 0;
			this.vx = this.renderer.velocity * Math.sin(theta) * rate;
			this.vy = -this.renderer.velocity * Math.cos(theta * this.renderer.getRandomValue(3, 6)) * rate;
			this.opacity = 1;
			this.luminance = 0;
			this.traces = [];
		},
		render: function(context, hue) {
			this.traces.push({
				x: this.x,
				y: this.y
			});

			if (this.traces.length > this.MAX_TRACES) {
				this.traces.shift();
			}
			context.save();
			context.strokeStyle = 'hsla(' + hue + ', 70%, ' + this.luminance + '%, ' + this.opacity + ')';
			context.beginPath();
			context.moveTo(this.traces[0].x, this.traces[0].y);

			for (var i = 1, count = this.traces.length; i < count; i++) {
				context.lineTo(this.traces[i].x, this.traces[i].y);
			}
			context.stroke();
			context.restore();
			this.x += this.vx;
			this.y += this.vy;
			this.vy += this.renderer.GRAVITY;

			if (this.vy > 0) {
				this.opacity -= 0.02;
			}
			if (this.luminance < 10) {
				this.luminance += 0.1;
			}
			return this.opacity > 0;
		}
	};
	$(function() {
		RENDERER.init();
	});
</script>
